<template>
  <div class="maintainer">
    <MaintainerHeader></MaintainerHeader>
    <div class="main">
      <el-row>
        <el-col :span="3">
          <MaintainerSidebar></MaintainerSidebar>
        </el-col>
        <el-col :span="21">
          <div class="content">
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>
    <MaintainerFooter></MaintainerFooter>
  </div>
</template>

<script>
import MaintainerHeader from '@/components/maintainer/MaintainerHeader.vue'
import MaintainerFooter from '@/components/maintainer/MaintainerFooter.vue'
import MaintainerSidebar from '@/components/maintainer/MaintainerSidebar.vue'
export default {
  async created () {
    await this.$store.dispatch('maintainerStore/getMaintainerInfoService')
  },
  components: {
    MaintainerHeader,
    MaintainerFooter,
    MaintainerSidebar
  }
}
</script>

<style lang="less" scoped>
.maintainer{
  background: #f5f5f5;
  border-top: 1px solid #ccc;
  .main{
    margin: 15px;
    .content{
      margin-left: 15px;
      padding:15px 30px;
      min-height: 500px;
      background: #fff;
    }
    }
  }
</style>
